<template>
	<view>
		<u-navbar title=" " leftIconColor="#fff" bgColor="transparent" :autoBack="true"></u-navbar>
		<u-loading-page loading-text="加载中..." :loading="loading" bg-color="#fff"></u-loading-page>
		<view v-if="!loading" class="content">
			<u--image
				:src="imgUrl + detail.images[0]"
				width="100%"
				height="180px"
				@click="preBgimg(imgUrl + detail.images[0])"
			></u--image>
			<view class="box">
				<view class="detail">
					<scroll-view scroll-x class="m-bottom-15">
						<view class="image_list">
							<view class="image_item" v-for="(item, index) in detail.images" :key="index">
								<u--image
									:src="imgUrl + item"
									width="260rpx"
									mode="aspectFill"
									radius="15rpx"
									height="195rpx"
									@click="preImg(imgUrl + item, index)"
								>
									<view slot="loading" style="font-size: 24rpx;">加载中</view>
								</u--image>
							</view>
						</view>
					</scroll-view>
					<u--text
						:text="language == 'zh' ? detail.box_name : detail.box_name_copy"
						bold
						size="19"
						lines="2"
						color="#000"
						margin="0px 0px 10px 0px"
					/>
					<view class="name flex">
						<view class="num">{{ detail.box_num + '人桌' }}</view>
						<view class="line"></view>
						<view class="num">{{ '最大容纳人数' + detail.box_max }}</view>
						<view class="style">
							{{ language == 'zh' ? detail.box_style : detail.box_style_copy }}
						</view>
						<view class="style" v-if="detail.is_custom">可以自行装饰</view>
					</view>
					<view class="reserve">
						可预定时间：{{ detail.shop_starttime }}-{{ detail.shop_endtime }}
					</view>
					<scroll-view scroll-x v-if="detail.roomList">
						<view class="label">
							<view v-for="(item, index) in detail.roomList" :key="index" class="label_item">
								{{ language == 'zh' ? item.name : item.name }}
							</view>
						</view>
					</scroll-view>
					<view class="m-top-30" v-if="detail.content">
						<u--text
							text="包厢介绍"
							size="18px"
							align="center"
							color="#000"
							bold
							margin="0px 0px 10px 0px"
						></u--text>
						<u--text
							:text="language == 'zh' ? detail.content : detail.content_copy"
							size="15px"
							align="center"
							lineHeight="48rpx"
						></u--text>
					</view>
				</view>
				<view class="yybtn"><view class="button" @click="yuding">预定包厢</view></view>

				<u-popup :show="show" mode="center" @close="show = false">
					<view class="popup">
						<view class="content">
							<!-- 用餐时间 -->

							<u--text
								:text="$t('reserve.date')"
								color="#141414"
								size="16"
								bold
								margin="15px 0px"
							></u--text>

							<scroll-view scroll-x>
								<view class="dateBox">
									<view class="num_item" @click="timeShow = true">
										{{ form.date ? form.date : '选择用餐时间' }}
									</view>
									<!-- <view v-for="(item,index) in dayList" class="num_item" @click="setDay(item)"
											:class="[form.date == item.year+'-'+item.month+'-'+item.day ? 'num_active' : '']">
											{{item.isToday ? '今日' : item.month+'.'+item.day}}
										</view> -->
								</view>
							</scroll-view>
							<!-- 结束 -->

							<u--text
								:text="$t('reserve.time')"
								color="#141414"
								size="16"
								bold
								margin="15px 0px"
							/>
							<scroll-view scroll-x>
								<view class="grid_3">
									<view
										class="grid3_item"
										@click="setName(item)"
										:class="[timeName == item.name ? 'grid_active' : '']"
										v-for="(item, index) in quantumList"
										:key="index"
									>
						<view class="grid_name">{{ item.name }}</view>

						<!-- <view class="grid_label">{{ item.label }}</view> -->
						<view class="grid_label">{{ item.dinnertime }}</view>
									</view>
								</view>
							</scroll-view>

							<scroll-view scroll-x v-if="timeName" class="m-top-20">
								<view class="dateBox">
									<view
										v-for="(item, index) in timeList"
										class="num_item"
										@click="setTime(item)"
										:class="[
											item.disabled ? 'disabled' : '',
											form.time == item.label ? 'num_active' : ''
										]"
									>
										{{ item.label }}
									</view>
								</view>
							</scroll-view>
						</view>
						<view @click="successYy" class="successYy">确认预约</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 弹窗 -->
		<popup v-model="popupShow" :title="$t('reserve.affirm')">
			<view slot="center">
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.bookPerson') }}</text>
					<text class="item_right">{{ userInfo.nickname }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.contactWay') }}</text>
					<text class="item_right">{{ userInfo.mobile }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.reserveTime') }}</text>
					<text class="item_right">{{ form.date + ' ' + form.time }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">
						{{ form.is_box == '大堂' ? $t('subscribe.deskNum') : $t('subscribe.boxName') }}
					</text>
					<text class="item_right">{{ boxName }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.reserve') }}</text>
					<text class="price">
						{{ userInfo.vip == '0' ? '￥' + shopDetails.reserve_price : '会员免费' }}
					</text>
				</view>
				<u-button
					:text="$t('reserve.confirm')"
					:customStyle="btn1Style"
					shape="circle"
					@click="goMenulist"
				/>
				<u--text
					:text="$t('subscribe.popupBtn1')"
					color="#FF9F04"
					size="16"
					align="center"
					margin="0 0 20px 0"
					@click="popupShow = false"
				/>
			</view>
		</popup>

		<u-modal
			:show="show1"
			showCancelButton
			@confirm="onConfirm"
			@cancel="onCancel"
			width="300"
			confirmColor="#FF9F04"
			:title="$t('reserve.hint')"
			content="是否提前点餐?"
		></u-modal>

		<u-calendar
			:show="timeShow"
			color="#FFC100"
			showLunar
			closeOnClickOverlay
			@close="timeShow = false"
			@confirm="timeConfirm"
		></u-calendar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			order_id: 0,
			show1: false,
			btnStyle: {
				background: '#FFC100',
				color: '#000',
				border: 'none',
				height: '90rpx'
			},
			btn1Style: {
				background: '#FFC100',
				border: 'none',
				color: '#000',
				height: '80rpx',
				width: '350rpx',
				margin: '20px auto'
			},
			boxName: '',
			timeList: [],
			numArr: [],
			imgUrl: this.$DOMAIN_URL,
			form: {
				shop_id: 0, //商铺id
				people: '', //用餐人数
				date: '', //日期
				time: '', //时间
				num: '', //座位号
				is_box: '大厅', //用餐位置
				reserve_people: '', //预定人
				reserve_mobile: '' //预定人手机号
			},
			popupShow: false,
			timeName: '',
			quantumList: [],
			loading: true,
			show: false,
			detail: {},
			shop: {},
			shopDetails: {},
			num: '', //用餐人数
			date: '', //用餐日期
			time: '', //用餐时间
			timeShow: false,
			dayList: [],
			token: '',
			startHour: 0, //开始时间
			endHour: 0, //结束时间
			step: 30, //间隔时间(分钟)
			result: '',
			timeName: '',
			boxId: 0
		};
	},
	onReady() {
		this.popupWidth = uni.$u.sys().windowWidth * 0.8;
	},
	onLoad(event) {
		this.shop = event;
		this.init();
		this.getBox();
		this.initPicker();
	},
	computed: {
		...mapGetters(['userInfo']),
		language() {
			return this._i18n.locale;
		}
	},
	methods: {
		//确认预约
		successYy() {
			if (this.form.time === '') {
				return uni.showToast({
					title: '请选择用餐时间',
					icon: 'none'
				});
			}
			this.show = false;
			this.popupShow = true;
		},
		//选择用餐时间
		timeConfirm(event) {
			console.log(event);
			this.timeShow = false;
			this.form.date = event[0];
			this.form.time = '';
			this.result = event[0];
			this.timeName = '';
			this.init();
		},
		//点击预定按钮弹窗
		yuding() {
			this.show = true;
		},
		async getBox() {
			let info = await this.$http.get('wanlshop/shop/addRoom', {
				id: this.shop.id
			});
			this.$http
				.get('wanlshop/shop/editRoom', {
					id: this.shop.id
				})
				.then(res => {
					if (res.code == 1) {
						this.detail = res.data;
						this.boxName = res.data.box_name;
						this.detail.roomList = [];
						this.detail.is_custom = parseInt(res.data.is_custom);
						this.detail.images = res.data.images
							? res.data.images.split('').includes(',')
								? res.data.images.split(',')
								: [res.data.images]
							: null;
						this.detail.box_ids = res.data.box_ids
							? res.data.box_ids.split('').includes(',')
								? res.data.box_ids.split(',')
								: [res.data.box_ids]
							: null;
						if (this.detail.box_ids) {
							let obj = {};
							info.data.roomList.forEach(item => {
								this.detail.box_ids.forEach(event => {
									if (event == item.id) {
										obj = {
											name: item.name,
											name_copy: item.name_copy
										};
										this.detail.roomList.push(obj);
									}
								});
							});
						}
						this.loading = false;
					}
				});
		},
		//获取数据
		init() {
			this.$http
				.post('wanlshop/reserve/reserveUserList', {
					shop_id: this.shop.shop_id,
					type: 0,
					date: this.form.date
				})
				.then(res => {
					if (res.code == 1) {
						console.log(res.data);
						this.shopDetails = res.data;
						this.quantumList = this.shopDetails.binner.filter(el => {
							return el.pid === 0;
						});
						this.quantumList.forEach(el => {
							let arr = el.dinnertime_text.split('-');
							let start = arr[0].split(':')[0];
							let end = arr[1].split(':')[0];
							el.start = start;
							el.end = end;
						});
					}
				});
		},
		forMatNumber(n) {
			return n < 10 ? '0' + n : n;
		},
		//默认选择的是当前的时间
		initPicker() {
			let _this = this;
			let aDate = new Date();
			let weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			_this.dayList.push({
				year: aDate.getFullYear(),
				month: _this.forMatNumber(aDate.getMonth() + 1),
				day: _this.forMatNumber(aDate.getDate()),
				week: weekList[aDate.getDay()],
				isToday: true
			});
			for (let i = 1; i <= 6; i++) {
				aDate.setDate(aDate.getDate() + 1);
				_this.dayList.push({
					year: aDate.getFullYear(),
					month: _this.forMatNumber(aDate.getMonth() + 1),
					day: _this.forMatNumber(aDate.getDate()),
					week: weekList[aDate.getDay()],
					isToday: false
				});
			}
			this.form.date =
				_this.dayList[0].year + '-' + _this.dayList[0].month + '-' + _this.dayList[0].day;
			this.init();
		},
		// 用餐时间
		setTime(item) {
			item.disabled ? uni.$u.toast('该时间无法预定') : (this.form.time = item.label);
			this.init();
		},
		getHours() {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeDate = [];
			for (let j = _this.startHour * 1; j < _this.endHour * 1; j++) {
				for (let k = 0; k < 60; k += _this.step) {
					_this.timeDate.push(_this.forMatNumber(j) + ':' + _this.forMatNumber(k));
				}
			}
			_this.timeDate.splice(_this.timeDate.length - 1, 1);
			let flag =
				this.form.date ==
				this.dayList[0].year + '-' + this.dayList[0].month + '-' + this.dayList[0].day;
			this.initHours(!flag);
		},
		getPresent() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var f = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var formatdate = y + '-' + m + '-' + d + ' ' + h + ':' + f;

			return formatdate;
		},
		initHours(flag) {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeList = [];
			let dateTime = this.getPresent();
			dateTime = new Date(dateTime.replace(/-/g, '/'));
			var presenTime = dateTime.getTime();

			if (flag) {
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = false;
					timeVal.show = false;
					console.log(timeVal);
					_this.timeList.push(timeVal);
					console.log(_this.timeList);
				}
			} else {
				_this.result =
					_this.dayList[0].year + '-' + _this.dayList[0].month + '-' + _this.dayList[0].day;
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					var timestamp = new Date(
						(_this.result + ' ' + _this.timeDate[i]).replace(/-/g, '/')
					).getTime();
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = timestamp < presenTime ? true : false;
					timeVal.show = false;
					_this.timeList.push(timeVal);
				}
			}
		},
		//用餐日期
		setDay(item) {
			this.init();
		},
		setName(item) {
			this.timeName = item.name;
			this.startHour = item.start;
			this.endHour = item.end;
			this.getHours();
		},
		//预览背景图
		preBgimg(img) {
			uni.previewImage({
				urls: [img],
				success() {
					console.log('success');
				}
			});
		},
		preImg(item, index) {
			let imgs = this.detail.images.map(el => this.imgUrl + el);
			uni.previewImage({
				urls: imgs,
				current: index,
				success(res) {
					console.log(res);
				}
			});
		},
		//支付

		//确认预定
		goMenulist() {
			let timestamp = new Date(this.form.date + ' ' + this.form.time).getTime() / 1000;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			console.log(this.shop);
			console.log(timestamp);
			this.$http
				.post('wanlshop/reserve/reserveUser', {
					shop_id: this.shop.shop_id,
					people: this.shop.num,
					num: this.shop.id,
					is_box: 0,
					mealsTime: timestamp,
					reserve_mobile: this.userInfo.mobile,
					reserve_people: this.userInfo.nickname
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.$emit('upList');
						this.order_id = res.data.reserveOrder.id;
						this.token = res.data.token;
						this.boxId = res.data.reserveOrder.num;
						let vip = parseInt(this.userInfo.vip);
						if (vip == 0) {
							this.getPay();
						} else {
							this.popupShow = false;
							this.show = true;
						}
					}
				});
		},
		//支付预定费用
		getPay() {
			uni.showLoading({
				title: '支付中...',
				mask: true
			});
			this.$http
				.post('wanlshop/pay/payment', {
					order_id: this.order_id,
					order_type: 'reserve',
					type: 'wechat',
					access_token: this.token,
					method: 'miniapp',
					code: uni.getStorageSync('code')
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							timeStamp: res.data.timeStamp,
							signType: res.data.signType,
							success: info => {
								this.popupShow = false;
								this.show1 = true;
							},
							fail: err => {}
						});
					}
				});
		},
		// 点菜确定
		onConfirm() {
			this.show1 = false;
			uni.$u.route({
				url: '/pagesA/home/menuList',
				type: 'redirectTo',
				params: {
					shop_id: this.shop.shop_id,
					reserve_id: this.order_id,
					table_num: this.boxId
				}
			});
		},
		// 点菜取消
		onCancel() {
			this.show1 = false;
			uni.$u.route({
				url: '/pagesA/subscribe/detail',
				type: 'redirectTo',
				params: {
					id: this.order_id
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	position: relative;
}

.box {
	background-color: #fff;
	border-top-left-radius: 35rpx;
	border-top-right-radius: 35rpx;
	position: absolute;
	left: 0;
	top: 260rpx;
	width: 100%;
	height: 200rpx;

	.detail {
		padding: 40rpx 30rpx;

		.image_list {
			display: flex;
			align-items: center;

			.image_item {
				margin-right: 20rpx;
				width: 260rpx;
				height: 195rpx;
				border-radius: 15rpx;
				flex-shrink: 0;
			}
		}

		.name {
			padding-bottom: 20rpx;
			flex-wrap: wrap;
			border-bottom: 2rpx solid #eeeeee;

			text {
				margin: 10rpx;
			}
			.line {
				background: #ff9f04;
				width: 3rpx;
				height: 30rpx;
				margin: 0rpx 20rpx;
			}

			.num {
				color: #ff9f04;
				font-size: 28rpx;
			}
			.style {
				color: #989898;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}
		.reserve {
			color: #434343;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
		.label {
			display: flex;
			align-items: center;

			.label_item {
				flex-shrink: 0;
				background-color: #f8f8f8;
				padding: 14rpx 30rpx;
				border-radius: 40rpx;
				color: #656565;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx 20rpx 0 0;
			}
		}
	}
}
.yybtn {
	width: 750rpx;
	height: 84rpx;
	background-color: #fff;
	position: fixed !important;
	margin: 0 auto;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.button {
		width: 692rpx;
		height: 74rpx;
		border-radius: 37rpx;
		background: linear-gradient(90deg, #ffc100 0%, #ffc100 100%);
		text-align: center;
		line-height: 74rpx;
	}
}
.successYy {
	width: 500rpx;
	height: 74rpx;
	border-radius: 37rpx;
	background: linear-gradient(90deg, #ffc100 0%, #ffc100 100%);
	text-align: center;
	line-height: 74rpx;
	margin: 0 auto;
	position: absolute;

	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
}
.popup {
	width: 690rpx;
	height: 1000rpx;
	z-index: 0;
}
.content {
	padding: 30rpx;
	background-color: #fff;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.status {
			display: flex;
			align-items: center;

			.status-box {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				.box-left-choosable,
				.box-left-forbidden {
					width: 30rpx;
					height: 30rpx;
					background-color: #eeeeee;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box-right {
					color: #989898;
					font-size: 26rpx;
					font-weight: 400;
				}

				.box-left-choosable {
					background-color: #ffc100;
				}
			}
		}
	}
}
.dateBox,
.numBox {
	display: flex;
	align-items: center;

	.num_item {
		background: #f8f8f8;
		border-radius: 39rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 20rpx 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.num_active {
		background: #fff8e2 !important;
		color: #ff9f04 !important;
	}
}
.grid_3 {
	display: flex;
	align-items: center;
	.grid3_item {
		background: #f8f8f8;
		border-radius: 100rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 10rpx 40rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.grid_name,
	.grid_label {
		text-align: center;
		line-height: 42rpx;
	}
	.grid_active {
		background: #fff8e2 !important;
		color: #ff9f04 !important;
	}
}
.box_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #eeeeee;
	padding: 40rpx 0;
	margin: 0 50rpx;

	.item_left {
		color: #818181;
		font-size: 30rpx;
		text-align: left;
	}

	.item_right {
		color: #231916;
		font-size: 30rpx;
		text-align: right;
	}

	.price {
		color: #ff583e;
		font-size: 30rpx;
		text-align: right;
	}
}

.box_item:last-child {
	border-bottom: none;
}
</style>
